<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<c:set var="path" value="<%=path%>" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>长沙市健康民生项目 — 管理系统</title>
<script type="text/javascript" src="sys/index/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="sys/index/DB_tabMotionBanner.js"></script>
<style type="text/css">
	html,body,div,span,
	applet,object,iframe,
	h1,h2,h3,h4,h5,h6,p,blockquote,pre,
	a,abbr,acronym,address,big,cite,code,
	del,dfn,em,font,img,ins,kbd,q,s,samp,
	small,strike,strong,sub,sup,tt,var,
	dd,dl,dt,li,ol,ul,
	fieldset,form,label,legend,
	table,caption,tbody,tfoot,thead,tr,th,td,input {
		margin: 0;
		padding: 0;
	}
	html{
		font-size: 62.5%;
		font-family: "HelveticaNeue";
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	ol,ul {
		list-style: none;
	}
	input:-webkit-autofill{
		-webkit-box-shadow : 0 0 0px 1000px white inset ;
	}
	html,body{
		width: 100%;
		height: 100%;
	}
	.login{
		width: 100%;
		height: 100%;
	}
	.login li{
		float: left;
	}
	.login .li-left{
		width: 60%;
		height: 100%;
		background: url("/csfy/static/manage-sys/image/xbg1.png") no-repeat;
		background-size: 100% 100%;
	}
	.login .li-right{
		width: 40%;
		height: 100%;
		background: url("/csfy/static/manage-sys/image/xbg2.jpg") no-repeat;
		background-size: 100% 100%;
		position: relative;
	}
	.login .li-right .login-div{
		background: #fff;
		position: absolute;
		left: 0px;
		top: 50px;
		right: 40px;
		bottom: 50px;
		border-radius: 0 5px 5px 0;
	}
	.login .li-right .login-div h2{
		font-size: 30px;
		color: #f7a590;
		text-align: center;
		margin: 110px 0 85px 0;
	}
	.login .li-right .login-div .yonghu,.mima{
		border: 1px solid #dfdfdf;
		height: 40px;
		border-radius: 40px;
		width: 300px;
		margin: 0 auto;
		text-indent: 50px;
	}
	.login .li-right .login-div input{
		border: none;
		outline: none;
		width: 250px;
		height: 40px;
		border-radius: 40px;
		font-size: 16px;
	}
	.login .li-right .login-div .yonghu{
		margin-top: 10px;
		background: url("/csfy/static/manage-sys/image/icon_users-.png") no-repeat 18px 8px;
	}
	.login .li-right .login-div .mima{
		margin-top: 10px;
		background: url("/csfy/static/manage-sys/image/icon_password.png") no-repeat 18px 8px;
	}
	.tishi{
		color: red;
		font-size: 16px;
		text-align: center;
	}
	.login .li-right .login-div .login-btn{
		height: 42px;
		line-height: 42px;
		border-radius: 42px;
		width: 302px;
		background: #f7a590;
		text-align: center;
		color: #fff;
		font-size: 22px;
		letter-spacing: 10px;
		margin: 50px auto 0 auto;
		cursor: pointer;
	}
</style>
</head>
<body>

<ul class="login">
	<li class="li-left">

	</li>
	<li class="li-right">
		<div class="login-div">
			<form id="loginForm" action="login.do" method="post">
				<h2>长沙健康民生平台</h2>
				<div class="yonghu">
					<input type="text" class="user" placeholder="用户名" name="userName">
				</div>
				<div class="mima">
					<input type="password" maxlength="16" class="passWord" name="passWord" onblur="passWordBlur()" placeholder="密码">
				</div>
				<div class="tishi"></div>
				<div class="login-btn" onclick="login()">登录</div>
			</form>
		</div>
	</li>
</ul>
<script type="text/javascript">
		$('.DB_tab25').DB_tabMotionBanner({
			key:'b28551',
			autoRollingTime:4000,
			bgSpeed:500,
			motion:
			{
				DB_1_1:{left:30,opacity:0,speed:1000,delay:500},
				DB_1_2:{top:-30,opacity:0,speed:1000,delay:500},
				DB_2_1:{top:30,opacity:0,speed:1000,delay:1000},
				DB_2_2:{top:-30,opacity:0,speed:1000,delay:1000},
				DB_3_1:{top:30,opacity:0,speed:1000,delay:1000},
				DB_3_2:{top:-30,opacity:0,speed:1000,delay:1000},
				end:null
			}

		})

		//添加点击回车按钮登录系统的方法
		document.onkeyup=function(e){
		    var keycode = window.event ? e.keyCode : e.which;
		    if(keycode == 13){
		        login();
			}
		}
		//登录
		function login() {
			if($(".user").val().length == 0){
				$(".tishi").text("请输入用户名");
				return false;
			}
			if($(".passWord").val().length == 0){
				$(".tishi").text("请输入密码");
				return false;
			}
			$(".tishi").text("");
			$("#loginForm").submit();
		}

		function passWordBlur() {
			if($(".passWord").val().length < 6 || $(".passWord").val().length > 16){
				$(".tishi").text("密码长度为6~16位！");
			}else {
				$(".tishi").text("");
			}
		}
</script>
</body>
</html>